<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #charts {
        background-color: gray;
      }
    </style>
  </head>
  <body>
    <!-- 画布 -->
    <canvas id="charts" width="1200" height="400"></canvas>
    <script>
      // 获取画布真实DOM
      const canvas = document.getElementById("charts");
      // 通过调用画布上的getContext方法得到画笔，参数为2d
      const context = canvas.getContext("2d");
      // 调整画笔颜色
      // context.strokeStyle = "yellowgreen";
      // 画笔起始点
      context.moveTo(100, 100);
      // 画笔转折点(可以有多个)
      context.lineTo(200, 200);
      // 画笔闭合
      context.stroke();

      // 绘制矩形
      // context.strokeStyle = "#000";
      context.fillStyle = "yellowgreen";
      context.strokeRect(300, 100, 100, 200);
    </script>
  </body>
</html>
